آموزش کامپوننت‌های استایل‌دار واکنش‌دهنده/مؤلفه‌های استایل‌دار [V5 EDITION]

سرفصل ها و درس ها

معرفی و نصب Introduction and installation

• مهم: قبل از شروع این دوره Important: Before you begin this course

• مقدمه ای بر React styled-components Introduction to React styled-components

• مقایسه سایر کتابخانه های CSS-in-JS Comparing other CSS-in-JS libraries

• نصب کامپوننت های استایلد + پلاگین ها و نکات مربوطه Installing styled components + relevant plugins and tips

مبانی کامپوننت‌های مدل‌دهی شده Basics of styled-components

• ایجاد اولین React styled-component ما Creating our first React styled-component

• اضافه کردن سبک های جهانی با استفاده از createGlobalStyle + افزودن فونت های گوگل Adding global styles using createGlobalStyle + adding Google fonts

• سبک های شرطی بر اساس لوازم Conditional styles based on props

• چگونه اجزای سبک کار می کنند "زیر کاپوت" How styled components works "under the hood"

• سبک های انبوه با استفاده از کمک کننده "css" styled-components Bulk styles using the styled-components "css" helper

ساخت برنامه ما - طرح و هدر Building out our app - layout & header

• نصب react-router-dom و اضافه کردن مسیرهای خانه و ورود به سیستم Installing react-router-dom and adding our home and login routes

• ایجاد طرح بندی صفحه و اجزای هدر Creating the page layout and header components

• حالت دادن به مؤلفه‌های React معمولی + گسترش سبک‌های مؤلفه‌های مدل‌دهی‌شده موجود Styling normal React components + extending existing styled component styles

• پیوندها بر اساس مسیرها (با قلاب useLocation از react-router-dom) Styling links based on routes (with useLocation hook from react-router-dom)

• پرس و جوهای رسانه با استفاده از مؤلفه های سبک Media queries using styled components

• قلاب useState React با نماد منو + کنترل‌کننده رویداد با مولفه‌های مدل‌دهی شده useState React hook with menu icon + event handlers with styled-components

ساخت برنامه ما - صفحه ورود Building out our app - login page

• ایجاد مؤلفه سبک ورودی Creating the Input styled component

• ایجاد یک کامپوننت سبک PasswordInput با کمک کننده attrs Creating a PasswordInput styled component with the attrs helper

• پیاده سازی تغییر رمز عبور نمایش/پنهان کردن Implementing the show / hide password toggle

• افزودن دکمه ها و بارگیری/ارسال وضعیت به فرم Adding the buttons and loading / submit state to the form

• انیمیشن با اجزای سبک با استفاده از کمک کننده فریم های کلیدی (لودینگ اسپینر) Animation with styled components using the keyframes helper (loading spinner)

متغیرها و قالب‌بندی با مؤلفه‌های مدل‌دهی‌شده و طرح‌های زمینه‌ای Variables & theming with styled components and styled-theming

• مبانی تم ها و متغیرها Themes and variables basics

• ایجاد کامپوننت به سبک تغییر موضوع Creating the theme toggle styled component

• پایان دادن به تغییر موضوع با useContext و ThemeContext Finishing the toggle theme with useContext and ThemeContext

• به روز رسانی GlobalStyles و منوها برای استفاده از رنگ های تم Updating GlobalStyles and menus to use theme colors

پیشرفته Advanced

• ارجاع به یک مؤلفه استایل‌دار در مؤلفه استایل‌گذاری‌شده دیگر Referencing a styled component within another styled component

• توابع درون یابی برای پاکسازی منطق سبک Interpolating functions to clean up style logic

• استفاده از PropType با کامپوننت های استایل دار Using PropTypes with styled components

منابع Resources

• مخزن Github Github Repository

• جایزه BONUS